<template>
	<view class="container">
		<view class="header">
			<h1>关注我们的公众号</h1>
			<p>获取最新资讯、专属福利和优质内容</p>
		</view>

		<view class="content">
			<view class="steps">
				<view class="step" @click="handleStepClick(1)">
					<view class="step-number">1</view>
					<view class="step-text">长按下方二维码</view>
				</view>

				<view class="step" @click="handleStepClick(2)">
					<view class="step-number">2</view>
					<view class="step-text">点击 "百润茂" </view>
				</view>

				<view class="step" @click="handleStepClick(3)">
					<view class="step-number">3</view>
					<view class="step-text">点击"关注服务号"按钮，即可完成</view>
				</view>
			</view>

			<view class="qrcode-container">
				<view class="qrcode-title">扫码关注公众号</view>
				<view class="qrcode pulse">
					<!-- 这里使用一个示例二维码图片，实际使用时替换为真实二维码 -->
					<!-- <image src="https://api.qrserver.com/v1/create-qr-code/?size=400x400&data=https://example.com"
						mode="aspectFit"></image> -->
					<uv-image src="https://www.bearing-mall.com/assets/images/gongzhonghao.jpg?v=1" :lazy-load="true"
						width="210" height="210" showMenuByLongpress="true"></uv-image>
				</view>
				<view class="hint">长按二维码识别也可关注</view>
			</view>
		</view>

		<view class="footer">
			<text>关注后获取更多精彩内容</text>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {

			};
		},
		methods: {
			handleStepClick(step) {
				console.log('点击了步骤:', step);
			}
		}
	}
</script>

<style lang="scss">
	/* 主容器 */
	.container {
		width: 100%;
		background: white;
		border-radius: 30rpx;
		overflow: hidden;
		box-shadow: 0 15rpx 30rpx rgba(0, 0, 0, 0.2);
		animation: fadeIn 0.6s ease;
	}

	@keyframes fadeIn {
		from {
			opacity: 0;
			transform: translateY(20rpx);
		}

		to {
			opacity: 1;
			transform: translateY(0);
		}
	}

	/* 头部 */
	.header {
		background: linear-gradient(90deg, #3a7bd5, #00d2ff);
		color: white;
		padding: 60rpx 40rpx;
		text-align: center;
	}

	.header h1 {
		font-size: 36rpx;
		margin-bottom: 20rpx;
		font-weight: 600;
	}

	.header p {
		font-size: 28rpx;
		opacity: 0.9;
	}

	/* 内容区域 */
	.content {
		padding: 60rpx 40rpx;
	}

	.steps {
		margin-bottom: 60rpx;
	}

	.step {
		display: flex;
		align-items: center;
		margin-bottom: 40rpx;
		padding: 30rpx;
		background: #f8f9fa;
		border-radius: 24rpx;
		transition: all 0.3s ease;
	}

	.step:active {
		transform: translateX(10rpx);
		box-shadow: 0 10rpx 30rpx rgba(0, 0, 0, 0.1);
	}

	.step-number {
		width: 72rpx;
		height: 72rpx;
		background: linear-gradient(90deg, #3a7bd5, #00d2ff);
		color: white;
		border-radius: 50%;
		display: flex;
		justify-content: center;
		align-items: center;
		font-weight: bold;
		margin-right: 30rpx;
		flex-shrink: 0;
		font-size: 32rpx;
	}

	.step-text {
		font-size: 32rpx;
		color: #333;
	}

	/* 二维码区域 */
	.qrcode-container {
		text-align: center;
		margin: 60rpx 0;
		padding: 40rpx;
		background: #f8f9fa;
		border-radius: 24rpx;
	}

	.qrcode-title {
		font-size: 36rpx;
		color: #3a7bd5;
		margin-bottom: 30rpx;
		font-weight: 600;
	}

	.qrcode {
		width: 400rpx;
		height: 400rpx;
		margin: 0 auto; /* 水平居中 */
		background: #fff;
		padding: 20rpx;
		border-radius: 24rpx;
		box-shadow: 0 10rpx 30rpx rgba(0, 0, 0, 0.1);
		display: flex; /* 添加弹性布局 */
		align-items: center; /* 垂直居中 */
		justify-content: center; /* 水平居中 */
	}

	.qrcode image {
		width: 100%;
		height: 100%;
	}

	.hint {
		margin-top: 30rpx;
		font-size: 28rpx;
		color: #666;
	}

	/* 底部 */
	.footer {
		text-align: center;
		padding: 40rpx;
		color: #666;
		font-size: 28rpx;
		border-top: 1px solid #eee;
	}

	/* 动画效果 */
	.pulse {
		animation: pulse 2s infinite;
	}

	@keyframes pulse {
		0% {
			transform: scale(1);
		}

		50% {
			transform: scale(1.05);
		}

		100% {
			transform: scale(1);
		}
	}
</style>